<template>
    <fieldset>
        <legend><h2>多个组件动画</h2></legend>

        <h3>组件过度动画</h3>
        <button @click="isShow1=!isShow1">点击动画</button>
        <transition name="fade">
            <Child1 v-if="isShow1"></Child1>
        </transition>
        <br>
        <h3>组件关键帧动画</h3>
        <button @click="isShow2=!isShow2">点击动画</button>
        <transition name="kf">
            <Child1 v-if="isShow2"></Child1>
        </transition>
        <br>
        <h3>组件第三方动画</h3>
        <button @click="isShow3=!isShow3">点击动画</button>
        <transition leave-active-class="animate__animated animate__swing" enter-active-class="animate__animated animate__bounce" mode="out-in">
            <Child1 v-if="isShow3" :key="1">
                <h1>这是第一个插槽</h1>
            </Child1>
            <Child1 v-else :key="2">
                <h1>这是第二个插槽</h1>
            </Child1>
        </transition>





    </fieldset>
</template>

<script>
    import Child1 from "../components/Child1";
    export default {
        name: "Animation5",
        components: {Child1},
        data:()=>{
            return{
                isShow1:true,
                isShow2:true,
                isShow3:true,
            }
        }
    }
</script>

<style scoped>
    @import "../../node_modules/animate.css/animate.css";
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
/*    ===============================================*/
    .kf-leave-active{
        animation:kfAnimate 3s linear;
    }
    .kf-enter-active{
        animation:kfAnimate 3s linear reverse;
    }
    @keyframes kfAnimate {
        0%{

            opacity: 1;
        }
        25%{
            background-color: brown;
            border-radius: 60px;
            opacity: .7;
        }
        50%{
            background-color:#989889;
            border-radius: 100px;
            opacity: .5;
        }
        75%{
            background-color: rebeccapurple;
            border-radius: 160px;
            opacity: .25;
        }100%{
             background-color: olivedrab;
             border-radius: 230px;
             opacity: 0;
         }

    }
</style>